<template>
  <div>
    <t-collapse :selected.sync="selectedTab" single style="margin:20px 0">
       <t-collapse-item title="标题1" name="1">
        <div class="content-wrapper">内容1</div>
      </t-collapse-item>
      <t-collapse-item title="标题2" name="2">
        <div class="content-wrapper">内容2</div>
      </t-collapse-item>
      <t-collapse-item title="标题3" name="3">
        <div class="content-wrapper">内容3</div>
      </t-collapse-item>
    </t-collapse>
    <div style="margin-top:15px">
      已展开的面板 {{selectedTab}}
    </div>
  </div>
</template>

<script>
import Collapse from "../../../src/components/collapse/collapse";
import CollapseItem from "../../../src/components/collapse/collapse-item";
export default {
  name: "collapse-demo-1",
  components: {
    't-collapse': Collapse,
    't-collapse-item': CollapseItem
  },
  data() {
    return {
      selectedTab: ["2"]
    };
  }
};
</script>


<style lang="scss">
.content-wrapper {
  padding: 25px 0;
}
</style>